<template>
	<view>
		<view class="pd16_15" style="margin-bottom: 80upx;">
			<view class="" style="">
				<block v-for="(value, key) in datasa" :key="key">
					<view @click="detail(value.id, 0)" style="" class="mb16 showStyle">
						<view class="flex alcenter ">
							<image mode="aspectFill" class="tuan-product-l" :src="value.img"></image>
							<!-- <view class="btn-mini" style="position: absolute; top: 40upx; left: 280upx; border-radius: 10upx;font-size: 18upx;width: 60upx; height: 36upx;" :style="getBtnStyle">{{value.lxname}}</view> -->
							<view class="tuan-product-r pl15">
								<view class="ft16 ftw600 cl-main text-over1">{{ value.name }}</view>
								<view class="ft16 ftw600 cl-main text-over1 small-text">浏览量：{{ value.views }}次</view>
								<view class="ft16 ftw600 cl-main text-over1 small-text">更新时间：{{ value.updatetime }}</view>
								<!-- <view class="mt16 flex space alcenter">
							<view class="ft14 cl-notice">{{value.mname}}</view>
							<view class="btn-vip-adviser ml15">继续观看</view>
						</view> -->
							</view>
						</view>
						<view class="mt5">
							<text class="ft14 cl-main text-over3" style="line-height: 50upx; color: #cbd5e1 !important;"><text class="ft16" style="">简介：</text>{{ value.story }}</text>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="home-main" style="height: 50upx;">
			<!-- <com-copyright></com-copyright> -->
		</view>

		<dialog-couponshareget @loginAct="showLoginCouponShareGet" v-if="showCouponShareGet"
			@closed="showCouponShareGet = false"></dialog-couponshareget>
	</view>
</template>

<script>
export default {
	props: ['datasa'],
	data() {
		return {
			isLogin: false,
			showBirthday: false,
			showLogin: false,
			showQrcode: false,
			showCouponShareGet: false,
		}
	},

	created() {

		// uni.setNavigationBarTitle({
		//     title: '夜趣小视频'
		// });

		// setTimeout(()=>{
		// 	this.showCouponShareGet = true;	
		// },1000);
	},
	methods: {
		//'/pages/client/tuan/detail?id='+value.id
		detail(vid, mid) {
			uni.navigateTo({
				url: '/pages/client/tuan/detail?vid=' + vid + '&mid=' + mid
			})
		},
		showLoginAct() {
			this.showLogin = true;
		},
		showLoginCouponShareGet() {
			this.showLogin = true;
		},
		loginYes() {

		}
	}
}
</script>

<style>
.showStyle::before {
	content: '';
	position: 'absolute';
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: -1;
	backdrop-filter: blur(80px);
}

.showStyle {
	position: relative;
	background: #111;
	border: 1px solid #333;
	border-radius: 16rpx;
	padding: 20rpx;
	box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(0, 0, 0, 0.5);
}

.home-header {
	height: 304rpx;
	width: 100%;
	position: relative;
	background: #111;
	border-radius: 0rpx 0rpx 48rpx 48rpx;
	border: 1px solid #333;
}

.home-main {
	width: 100%;
	position: relative;
	margin-top: -156rpx;
	padding: 0 30rpx;
}

.home-mendian {
	width: 100%;
	height: 84rpx;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 42rpx;
}

.tuan-product-l {
	width: 200rpx;
	height: 260rpx;
	border-radius: 16rpx;
	background: #222;
}

.tuan-product-r {
	width: calc(100% - 200rpx);
	height: 260rpx;
}

/* 确保所有文字都是白色 */
* {
	color: #fff !important;
}

.btn-vip-adviser {
	width: 200rpx;
	height: 60rpx;
	border-radius: 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	/* font-weight: 600; */
	background: #0f0;
	color: #000;
}

.integral-mall-goods {
	width: 100%;
	height: 280rpx;
	background: #222;
	border-radius: 16upx;
}

/* 深色主题样式覆盖 */
.cl-main {
	color: #fff !important;
}

.cl-notice {
	color: #fff !important;
}

/* 重置样式 */
.showStyle{
	background: rgba(15, 23, 42, 0.5);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.small-text{
	margin-top: 24rpx;
	font-size: 24rpx;
	color: #ccc !important;
}
</style>
